{% extends "base.html" %}
{% set active_page = "contact" %}
{% set home_page = "contact" %}
{% block page_head %}
<!-- Page Head -->
<section class="brake-line" id="page-head">
    <div class="inner">
        <div class="container">
            <div class="row">
                <div class="span8">
                    <hgroup>
                        <h1>Perfect Solutions for Your Business &amp; Work</h1>
                        Enquire about our services or products that suits your needs, or for just a quotation.
                    </hgroup>
                </div>
                <div class="span4">
                    <form action="#" id="search-form" class="pull-right">
                        <div class="input-append pull-right">
                            <input type="text" size="16" placeholder="Search here&hellip;">
                            <button type="button" class="more">Search</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- #page-head -->
{% endblock %}
{% block content %}
<!-- Main Content -->
<div class="container">
    <div class="row">
        <article class="span9">
        <div id="map">
            <iframe width="692" height="293" frameborder="0" scrolling="no" marginheight="0" class="thumbnail" marginwidth="0" src="https://maps.google.com/maps?hl=en&amp;q=-1.292726,36.787295&amp;ie=UTF8&amp;hq=&amp;hnear=Yaya center&amp;t=m&amp;ll=q=-1.292726,36.787295&amp;spn=0.019049,0.059309&amp;z=10&amp;iwloc=A&amp;output=embed"></iframe>
            <img src="/static/img/map-shadow.png" alt="">
        </div>
        <div class="row">
            <aside class="span3 sidebar" id="widgetarea-contact">
                <div class="widget widget_contact">
                    <h3 class="widget-title">Contact Details</h3>
                    <p>Amboseli Road<br> P.O.Box 21324-00100,Nairobi</p>
                    <p>Phone: (254) 750 76 6049</p>
                    <p>Email: <a href="mailto:contact@qsi.com">contact@qsi.com</a></p>
                    <p>Web: <a href="#">www.qsi.com</a></p>
                </div>
                <div class="widget widget_text">
                    <h3 class="widget-title">Feel free!</h3>
                    <p>Feel free to contact with any problem,enquiries or general comments regarding our products. Feel free to even invite us for that cup of coffee</p>
                </div>
            </aside>
            <div class="span6">
                <form action="#" class="standard-form">
                    <fieldset><input type="text" name="name" placeholder="Type your name&hellip;"></fieldset>
                    <fieldset><input type="text" name="lastname" placeholder="Type your last name&hellip;"></fieldset>
                    <fieldset><textarea name="message" placeholder="Type your name&hellip;"></textarea></fieldset>
                    <input type="submit" value="Send" class="more-large">
                </form>
            </div>
        </div>
        </article>
        <aside class="span3 sidebar" id="widgetarea-sidebar">
            <div class="widget widget_subscribers">
                <a href="#" class="s_twitter"><strong>1832</strong>Followers</a>
                <a href="#" class="s_rss"><strong>1832</strong>Followers</a>
            </div>
            <div class="widget widget_text">
                <h3 class="widget-title">Greetins</h3>
                <p>QSI team appreciates your presence here.
                    We acknowledge the impact you have created in our development from humble beginnings to where we are now</p>
            </div>
            <div class="widget widget_recent_content">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#recent" data-toggle="tab">Recent</a></li>
                    <li><a href="#popular" data-toggle="tab">Popular</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="recent">
                        <dl>
                            <dt><a href="#"><img src="/static/img/thumb.png" alt=""></a></dt>
                            <dd> QSI Website - . <a href="#">27 June 2013</a></dd>
                        </dl>
                        <dl>
                            <dt><a href="#"><img src="/static/img//thumb.png" alt=""></a></dt>
                            <dd> QSI web applications <a href="#">27 June 2013</a></dd>
                        </dl>
                    </div>
                    <div class="tab-pane" id="popular">
                        <dl>
                            <dt><a href="#"><img src="/static/img/thumb.png" alt=""></a></dt>
                            <dd> QSI Trackit <a href="#">27 June 2013</a></dd>
                        </dl>
                        <dl>
                            <dt><a href="#"><img src="/static/img/thumb.png" alt=""></a></dt>
                            <dd> QSI Trackit <a href="#">27 June 2013</a></dd>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="widget widget_archives">
                <h3 class="widget-title">Archives</h3>
                <ul>
                    <li><a href="#">March 2013</a></li>
                    <li><a href="#">April 2013</a></li>
                    <li><a href="#">May 2013</a></li>
                    <li><a href="#">June 2013</a></li>
                    <li><a href="#">Jule 2013</a></li>
                </ul>
            </div>
            <div class="widget widget_twitter">
                <h3 class="widget-title">Twitter Widget</h3>
                <div></div>
            </div>
        </aside>
    </div>
</div>
<!-- #content -->
{% endblock %}
{% block social_profiles_inner %}
<!-- Social Profiles -->
<section class="brake-line" id="social-profiles">
    <div class="inner">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <ul class="pull-right">
                        <li id="i-facebook">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> Facebook</strong>
                            </a>
                        </li>
                        <li id="i-dribbble">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> Dribbble</strong>
                            </a>
                        </li>
                        <li id="i-google">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> Google+</strong>
                            </a>
                        </li>
                        <li id="i-linkedin">
                            <a href="#">
                                <span></span>
                                <strong class="hidden-phone"> LinkedIn</strong>
                            </a>
                        </li>
                    </ul>
                    <div class="pull-left visible-desktop">
                        Stay connected with us in your favorite flavor!
                    </div>

                </div>

            </div>

        </div>

    </div>
</section>
<!-- #social-profiles -->
{% endblock %}
{% block footer_inner %}
<div class="inner">
    <div class="container">
        <div class="row">
            <!--                         widget-->
            <div class="span3 widget widget_text">
                <h3 class="widget-title">About QSI</h3>
                <p>Short description</p>
            </div>
            <!--                         widget-->
            <div class="span3 widget widget_recent_posts">
                <h3 class="widget-title">Latest From The Blog</h3>
                <dl>
                    <dt>
                        <a href="#">
                            <img src="/static/img/blog-post-thumb.png" alt="">
                        </a>
                    </dt>
                    <dd> works started on the follwing date
                        <a href="#">1 August 2013</a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <a href="#"><img src="/static/img/blog-post-thumb.png" alt=""></a>
                    </dt>
                    <dd> works started on the follwing date
                        <a href="#">1 August 2013</a>
                    </dd>
                </dl>
            </div>
            <!--                         widget-->
            <div class="span3 widget widget_twitter">
                <h3 class="widget-title">Last Tweets</h3>
                <div>

                </div>

            </div>
            <!--                         widget-->
            <div class="span3 widget widget_flickr">
                <h3 class="widget-title">Flickr Widget</h3>
                <div>
                    <!--                                <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user={{flicker_user_id}}"></script>-->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}